<style>
    .tools-btn { padding: 5px 7px; border-radius: 12px; }
    .type-info, .attach-info { display: none; }

    .range-input { text-align: center; }
    .description { color: #999; font-size: 13px; }
    .send-item-list li, .send-pet-list li { margin: 8px 0; }
    .send-item-list li .form-control, .send-pet-list li .form-control { margin-right: 2px; }
    .chosen-container-single .chosen-single { height: 35px; line-height: 35px; padding: 0 0 0 13px; }
    .chosen-container-single .chosen-single div b { background-position: 0 8px; }
    .chosen-container-active.chosen-with-drop .chosen-single div b { background-position: -18px 8px; }
    .div_item_name{float: left;}
    .div_item_id{float: left;}
    form{margin-bottom: 300px;}
</style>
<link rel="stylesheet" type="text/css" href="/public/static/plugin/inputSearch/autocomplete.css" />

<form method="post" action="/oss/?r=send/doAdd">
    <{include file='../common_params.tpl'}>

    <div class="box box-black">
        <div class="box-body">
            <h5> <i class="fa fa-users"></i>&nbsp;&nbsp;收件人设置</h5>
            <table class="table table-bordered">
                <colgroup>
                    <col style="width: 20%;"></col>
                    <col style="width: 80%;"></col>
                </colgroup>
                
                <tr>
                    <th class="th-label">专服</th>
                    <td>
                        <select class="form-control" name="special">
                            <{html_options options=$specialList selected=$server}>
                        </select>
                    </td>
                </tr>
                <!--<tr>
                    <th class="th-label">渠道</th>
                    <td>
                        <select class="form-control" name="os">
                            <{foreach from=$osList item=item key=key}>
                        		<option value="<{$key}>"><{$item}></option>
                        	<{/foreach}>
                        </select>
                    </td>
                </tr>-->

                <tr>
                    <th class="th-label">服务器</th>
                    <td id="change_server">
                        <select class="form-control" name="server">
                            <{foreach from=$serverList item=item key=key}>
                        		<option value="<{$key}>-<{$item}>"><{$item}></option>
                        	<{/foreach}>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th class="th-label">发送类型</th>
                    <td>
                        <select name="send_type" id="sel_send_type" class="form-control">
                            <{html_options options=$sendType}>
                        </select>
                    </td>
                </tr>

                <tr class="type-info" for="1">
                    <th class="th-label">角色名称</th>
                    <td>
                        <textarea class="form-control" rows="5" name="rolename" placeholder="请输入角色名字"></textarea>
                    </td>
                </tr>

                <tr class="type-info" for="2">
                    <th class="th-label">角色ID</th>
                    <td>
                        <textarea class="form-control" rows="5" name="roleid" placeholder="多个角色换行分隔"></textarea>
                    </td>
                </tr>

                <tr class="type-info" for="3">
                    <th class="th-label">账号名称</th>
                    <td>
                        <textarea class="form-control" rows="5" name="accountname" placeholder="多个账号换行分隔"></textarea>
                    </td>
                </tr>

                <!--<tr class="type-info" for="4">
                    <th class="th-label">等级范围</th>
                    <td><input type="text" class="form-control inline range-input" name="min_level" placeholder="最低等级" /> ~ <input type="text" class="form-control inline range-input" nam="max_level" placeholder="最高等级" /></td>
                </tr>

                <tr class="type-info" for="4">
                    <th class="th-label">VIP等级</th>
                    <td><input type="text" class="form-control inline range-input" name="vip_level" /></td>
                </tr>

                <tr class="type-info" for="4">
                    <th class="th-label">登陆时间范围</th>
                    <td><input type="text" class="form-control inline range-input time" name="min_logintime" placeholder="开始时间" /> ~ <input type="text" class="form-control inline range-input time" name="max_logintime" placeholder="结束时间" /></td>
                </tr>

                <tr class="type-info" for="4">
                    <th class="th-label">注册时间范围</th>
                    <td><input type="text" class="form-control inline range-input time" name="min_regtime" placeholder="开始时间" /> ~ <input type="text" class="form-control inline range-input time" name="max_regtime" placeholder="结束时间" /></td>
                </tr>

                <tr class="type-info" for="4">
                    <th class="th-label">玩家性别</th>
                    <td>
                        <input type="radio" id="con_sex_a" name="sex" value="" checked/> <label for="con_sex_a">全部</label>
                        <input type="radio" id="con_sex_m" name="sex" value="1" /> <label for="con_sex_m">男</label>
                        <input type="radio" id="con_sex_f" name="sex" value="2" /> <label for="con_sex_f">女</label>
                    </td>
                </tr>

                <tr class="type-info" for="4">
                    <th class="th-label">玩家职业</th>
                    <td>
                        <select class="form-control" name="career">
                            <option value="">全部</option>
                        </select>
                    </td>
                </tr>

                <tr class="type-info" for="4">
                    <th class="th-label">帮派名称</th>
                    <td><textarea class="form-control" rows="5" name="guild" placeholder="多个帮派换行分隔"></textarea></td>
                </tr>-->

            </table>
            <h5> <i class="fa fa-envelope-o"></i>&nbsp;&nbsp;邮件内容</h5>
            <table class="table table-bordered">
                <colgroup>
                    <col style="width: 20%;"></col>
                    <col style="width: 80%;"></col>
                </colgroup>

                <tr>
                    <th class="th-label">邮件标题</th>
                    <td><input type="text" class="form-control" name="title" /></td>
                </tr>

                <tr>
                    <th class="th-label">邮件内容</th>
                    <td><textarea class="form-control" name="content" rows="5"></textarea></td>
                </tr>

                <!--<tr>
                    <th class="th-label">邮件附件</th>
                    <td>
                        <label><input type="checkbox" class="attach-check simple" data-val="1" /> 道具</label>
                        <br/>
                        <label><input type="checkbox" class="attach-check simple" data-val="2" /> 宠物</label>
                    </td>
                </tr>-->
                
                <tr>
                    <th class="th-label">是否发送道具</th>
                    <td>
                    	<div style="padding-top: 5px;">
                    		<input type="radio" name="is_send_good" id="is_send_good1" value="1" checked="checked"/>是
                    		&nbsp;&nbsp;
                    	    <input type="radio" name="is_send_good" id="is_send_good2" value="2" />否
                    	</div>	
                    </td>
                </tr>

                <tr class="attach-info" for="1" style="display: table-row;">
                    <th class="th-label">发送道具</th>
                    <td>
                        <ul class="nav send-item-list">
                            <li class="fli">
                                <!--
                                <select style="width: 140px;" class="sel-item-type form-control inline">
                                    <option value="">--道具类型--</option>
                                    <{html_options options=$itemType}>
                                </select>

                                <select name="item_type[]" style="width: 280px;" class="sel-item-list form-control inline">
                                    <option value="">--请先选择道具类型--</option>
                                </select>
                                -->
                                <div class="div_item_name"></div>
                                
                                <div class="div_item_id"></div>
                                
                                <!--<input name="item_name[]"  class="form-control inline" placeholder="道具名称" size="12"/>-->
                                
                                <!--<input name="item_id[]" class="form-control inline" placeholder="道具ID" />-->

                                <input type="text" name="item_number[]" class="form-control inline" placeholder="数量" size="12" />
                                
                                <select name="is_bind[]" class="form-control inline">
                                	<option value="1">绑定</option>
                                	<option value="0">不绑定</option>
                                </select>

                                <div class="box-tools inline">
                                    <a href="javascript:;" class="tools-btn tools-btn-add badge bg-green"><i class="fa fa-plus"></i></a>
                                    <a href="javascript:;" class="tools-btn btn-del badge bg-red"><i class="fa fa-minus"></i></a>
                                </div>
                                
                                <input type="text" name="item_description[]" class="form-control inline" placeholder="描述" size="30" />
                            </li>
                        </ul>

                        <span class="description">道具ID/数量为必填,有一项为空表示不发送道具.</span>
                    </td>
                </tr>

                <!--<tr class="attach-info" for="2">
                    <th class="th-label">发送宠物</th>
                    <td>
                        <input name="pet_id" class="form-control" placeholder="宠物ID" />
                        <span class="description">填写宠物ID时表示发送宠物</span>

                        <p style="margin: 20px 0 0 0; font-size: 13px;">宠物扩展参数(没有则置空):</p>
                        <ul class="nav send-pet-list">
                            <li>
                                <input name="pet_extra_key[]" class="form-control inline" placeholder='Key值' />
                                <input name="pet_extra_val[]" class="form-control inline" placeholder='Value值' />

                                <div class="box-tools inline">
                                    <a href="javascript:;" class="tools-btn pet-btn-add badge bg-green"><i class="fa fa-plus"></i></a>
                                    <a href="javascript:;" class="tools-btn btn-del badge bg-red"><i class="fa fa-minus"></i></a>
                                </div>
                            </li>
                        </ul>

                        <span class="description">需要填写扩展值时,一行内Key值与Value值一一对应.</span>
                    </td>
                </tr>-->
<!--
                <tr>
                    <th class="th-label">相关订单号</th>
                    <td>
                        <input type="text" class="form-control" name="order_id" />
                        <span class="description">因订单问题,补发金币/道具时需要填写相关订单号.其他为空就好了.</span>
                    </td>
                </tr>

                <tr>
                    <th class="th-label">邮件保留时间</th>
                    <td>
                        <input type="text" class="form-control" value="604800" name="time" />
                        <span class="description">表示用户阅读该邮件之后,多久自动删除.单位为秒,为0表示阅后即焚.</span>
                    </td>
                </tr>
-->
            </table>
            
            <{include file="tpl/goods_search.tpl"}>
            
        </div>

        <div class="box-footer">
        	<a href="javascript:history.go(-1);" class="btn btn-default">返回</a>
            <button type="submit" name="sub" class="btn btn-default pull-right"><i class="fa fa-paper-plane-o"></i> 发送</button>
            <div style="clear: both;"></div>
        </div>
    </div>
</form>

<script type="text/javascript">
    $(function(){
        var itemUrl = '<{$itemUrl nofilter}>';
        var cloneItem = $(".send-item-list li:first-child").clone();
        var clonePet = $(".send-pet-list li:first-child").clone();

        $(".sel-item-list").chosen();
        $(".sel-item-type").live('change', function(){
            var type = $(this).val(),
                itemSelect = $(this).next('.sel-item-list');

            itemSelect.val('').find('option.item').remove();
            itemSelect.trigger("chosen:updated");
            if(type){
                $.getJSON(itemUrl, { 'type':type }, function(rs){
                    for(var i in rs){
                        itemSelect.append('<option class="item" value="'+rs[i]['id']+'">'+rs[i]['id']+' - '+rs[i]['name']+'</option>');
                    }
                    itemSelect.trigger("chosen:updated");
                });
            }
        });

        $("#sel_send_type").change(function(){
            var sendType = $(this).val();

            $(".type-info").hide().filter('[for="'+sendType+'"]').show();
        }).change();

        /**$(".attach-check").click(function(){
            var value = $(this).attr('data-val');

            var infoTr = $(".attach-info").filter('[for="'+value+'"]');

            if($(this).is(':checked')){
                infoTr.show();
            }else{
                infoTr.hide();
            }
        });**/

        $("input.time").datetimepicker({
            format: 'yyyy-mm-dd hh:ii:00',
        });

        /**$(".range-input").change(function(){
            var object = $(this),
                index = object.index();

            if(index == 1){
                var from = getRangeVal(object.prev());
                var to = getRangeVal(object);
            }else {
                var from = getRangeVal(object);
                var to = getRangeVal(object.next());
            }

            if(to && from && to < from){
                alert('范围填写错误!');
                object.val('');
            }
        });**/

        $(".tools-btn-add").live('click',function(){
        	var length = $(".send-item-list .fli").length;
        	if(length > 4){
        		layer.alert('发送的道具不能大于5种');
        		return false;
        	}
            var li = $(this).closest('li');
            var oneClone = cloneItem.clone();
            
            
            oneClone.insertAfter(li);
            oneClone.find('.sel-item-list').chosen();
            
            oneClone.find('.div_item_name').autocomplete({
            	placeholder: '道具名称',
		        hints: proposals,
		        width: 150,
		        height: 34,
		        showButton: false,
		        name:'item_name[]',
		        onSubmit: sub,
		        onBlur:blur,
		        search:search
	        });
            
            oneClone.find('.div_item_id').autocomplete({
            	placeholder: '道具ID',
            	hints: item_id,
            	width: 150,
            	height: 34,
            	showButton: false,
            	name:'item_id[]',
            	//onSubmit: sub1,
            	//onBlur:blur1,
            	//search:search1
            });
            
        });

        $(".pet-btn-add").live('click',function(){
            var li = $(this).closest('li');
            var oneClone = clonePet.clone();
            oneClone.insertAfter(li);
        });

        $(".btn-del").live('click',function(){
            if(!window.confirm('是否要删除该条数据?')) return true;
            var li = $(this).closest('li'),
                ul = li.closest('ul');

            if(ul.children('li').length > 1){
                li.remove();
            }else{
                li.find('select, input').val('').change();
            }
        });

        function getRangeVal(object){
            if(!object) return null;

            var val = object.val();

            if(object.hasClass('time')){
                return Date.parse(new Date(val));
            }else{
                return val;
            }
        }
        
        var nameflag = true;
        var idflag = true;
        var numberflag = true;
        $('button[name="sub"]').click(function(){ 
        	var is_send_good = $('input[name="is_send_good"]:checked').val();
        	
        	var title = $('input[name="title"]').val();
        	if(title == ''){
        		layer.alert('请填写邮件标题', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	var content = $('textarea[name="content"]').val();
        	if(content == ''){
        		layer.alert('请填写邮件内容', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	var content_l = content.length;
        	if(content_l > 1000){
        		layer.alert('邮件内容不能超过1000字', {icon: 2, skin: 'layui-layer-molv'});
        		return false;
        	}
        	
        	$('input[name="item_name[]"]').each(function (i){
        		if($(this).val() == ''){
        			nameflag = false;
        		}else{
        			nameflag = true;
        		}
            });
            
            if(!nameflag && is_send_good == 1){
            	layer.alert('请填写道具名称', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
            }

            $('input[name="item_id[]"]').each(function (i){
        		if($(this).val() == ''){
        			idflag =  false;
        		}else{
        			idflag = true;
        		}
            });
            
            if(!idflag && is_send_good == 1){
            	layer.alert('请填写道具ID', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
            }
            
            $('input[name="item_number[]"]').each(function (i){
            	var max_overlap = $(this).attr('data-max');
            	_sthis = $(this);
		        var num = $(this).val();
        		if($(this).val() == ''){
        			numberflag = false;
        		}else if(parseInt(num) > parseInt(max_overlap)){
        			_sthis.val(max_overlap);
        		}else{
        			numberflag = true;
        		}
            });
            
            if(!numberflag && is_send_good == 1){
            	layer.alert('请填写道具数量', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
            }
 
//          alert('结束');
//          return false;
        });
    });
</script>

<script src="/public/static/plugin/inputSearch/autocomplete.js"></script>
<script>
$(document).on('keyup','input[name="item_name[]"]',function(){
	//console.log($(this).val());
	
});
//var proposals = {'1':'懒人之家','2':'懒人素材','3':'懒人特效'};
var proposals = {};
//var proposals = ['at', 'boat', 'bear', 'chief', 'dog', 'drink', 'elephant', 'fruit', 'grave','hotel', 'illness', 'London', 'motorbike','懒人之家','懒人素材','懒人特效'];


//根据道具名称搜索出道具id
var sub = function(val,input){
	//console.log(val);
	//console.log(input);
	//var placeholder = input.parent('div').parent('div').parent().find("input[name='item_id[]']").attr('placeholder');
	//console.log(placeholder);
	//input.parent('div').parent('div').parent().find("input[name='item_id[]']").val(val);
	getValue(val,input,1);
};

var blur =function(val,input){
	getValue(val,input,1);
};

var search = function(val){
	var data = selectGoods(val,1);
	return data;
};
$(document).ready(function(){
	$('.div_item_name').autocomplete({
		placeholder: '道具名称',
		hints: proposals,
		width: 150,
		height: 34,
		showButton: false,
		name:'item_name[]',
		onSubmit: sub,
		onBlur:blur,
		search:search
	});
});


function selectGoods(val,type){
	var g = $('input[name="g"]').val();
	var url = '?r=goods/autoComplete&g='+g;
	var json = '';
	$.ajax({
    	type : 'POST',
    	url : url,
    	async:false,
		data : {'val':val,'type':type},
		dataType :'JSON',
		success : function(res){
			if(res.status == 1){
				json = res.data;
			}else{
					
			}
		}
	});
	return json;
}

function getValue(val,input,type){
	var g = $('input[name="g"]').val();
	var url = '?r=goods/getValue&g='+g;
	$.ajax({
    	type : 'POST',
    	url : url,
		data : {'val':val,'type':type},
		dataType :'JSON',
		success : function(res){
			if(res.status == 1){
				if(type == 1){
					input.parent('div').parent('div').parent().find("input[name='item_id[]']").val(res.data.gid);
					input.parent('div').parent('div').parent().find("input[name='item_number[]']").attr('data-max',res.data.max_overlap);
					input.parent('div').parent('div').parent().find("input[name='item_description[]']").val(res.data.description);
					//input.parent('div').find(".proposal-list").empty();
				}else if(type == 2){
					input.parent('div').parent('div').parent().find("input[name='item_name[]']").val(res.data.name);
					input.parent('div').parent('div').parent().find("input[name='item_number[]']").attr('data-max',res.data.max_overlap);
					input.parent('div').parent('div').parent().find("input[name='item_description[]']").val(res.data.description);
					//input.parent('div').find(".proposal-list").empty();
				}
			}else{
					
			}
		}
	});
}

</script>


<script>
var item_id = {};
//根据道具id搜索出道具名称
var sub1 = function(val,input){
	getValue(val,input,2);
};

var blur1 =function(val,input){
	getValue(val,input,2);
};

var search1 = function(val){
	var data = selectGoods(val,2);
	return data;
};

$(document).ready(function(){
	$('.div_item_id').autocomplete({
		placeholder: '道具ID',
		hints: item_id,
		width: 150,
		height: 34,
		showButton: false,
		name:'item_id[]',
		//onSubmit: sub1,
		//onBlur:blur1,
		//search:search1
	});
});


</script>

<script>
//	$(function(){
//		var onChange = function(val){
//	        //console.log(val);
//	        var os = val;
//      	var g = $("input[name='g']").val();
//      	var url = '/oss/?r=channel/getServer&g='+g;
//      	$.ajax({
//  		    type : 'POST',
//  		    url : url,
//			    data : {'os':os,'g':g},
//			    dataType :'JSON',
//			    success : function(res){
//				    if(res.status == 1){
//				    	var option = '';
//				    	for (var i=0;i<res.data.list.length;i++){
//				    		option += "<option value='"+res.data.list[i]['server_id']+"-"+res.data.list[i]['server_name']+"'>"+res.data.list[i]['server_name']+" ("+res.data.list[i]['server_num']+")</option>";
//					    }
//					    $('select[name="server"]').empty();
//					    $('select[name="server"]').append(option);
//					    $('#change_server').text('');
//					    
//					    var select = '<select class="form-control" name="server">'+option+'</select>';
//					    
//					    $('#change_server').html(select);
//					    $('#change_server').find('select[name="server"]').searchableSelect();
//				    }else{
//					    $('select[name="server"]').empty();
//				    }
//			    }
//	        });
//      };
//		
//		$('select[name="server"]').searchableSelect();
//		$('select[name="os"]').searchableSelect({onChange:onChange});
//		  
//	});
	
	$(function(){
		var speChange = function(val){
	        //console.log(val);
	        var special_id = val;
	        var os = 'ALL';
        	var g = $("input[name='g']").val();
            var url = '/oss/?r=channel/getServer&g='+g;
        	$.ajax({
    		    type : 'POST',
    		    url : url,
			    data : {'os':os,'g':g,'special_id':special_id},
			    dataType :'JSON',
			    success : function(res){
				    if(res.status == 1){
				    	var option = '';
				    	for (var i=0;i<res.data.list.length;i++){
				    		option += "<option value='"+res.data.list[i]['id']+"-"+res.data.list[i]['server_name']+"'>"+res.data.list[i]['server_name']+" ("+res.data.list[i]['server_num']+")</option>";				    		
					    }
					    $('select[name="server"]').empty();
					    $('select[name="server"]').append(option);
					    $('#change_server').text('');
					    
					    var select = '<select class="form-control" name="server">'+option+'</select>';
					    
					    $('#change_server').html(select);
					    $('#change_server').find('select[name="server"]').searchableSelect();
				    }else{
					    $('select[name="server"]').empty();
				    }
			    }
	        });
        };
		$('select[name="server"]').searchableSelect();
		$('select[name="special"]').searchableSelect({onChange:speChange});
	});
	
	
	
	
	
</script>

<script>
	$("input[name='item_number[]']").live('blur',function(){
		var max_overlap = $(this).attr('data-max');
		var num = $(this).val();
		var _this = $(this);
		if( parseInt(num) > parseInt(max_overlap)){
			layer.alert('该道具的最大数量是'+max_overlap, {icon: 2, skin: 'layui-layer-molv'});
			_this.val(max_overlap);
		}
	});
	
	
	
	
	$('#is_send_good1').on('ifChecked', function(event){
   	   $('.attach-info').show();
    });
    
    $('#is_send_good2').on('ifChecked', function(event){
   	   $('.attach-info').hide();
    });
	
</script>


